<script setup>
import {Shop, UserFilled} from "@element-plus/icons-vue";
import {defineEmits, onMounted, ref} from 'vue'
import {ElIcon, ElMessage, ElMessageBox} from "element-plus";
import router from "@/router/index.js";

const user = ref(JSON.parse(sessionStorage.getItem("CurUser")));
const emit = defineEmits(["doCollapse"])
const props = defineProps({icon_code: String})
const toUser = function () {
  console.log('to_user')
  router.push("/home")
}
const logout = function () {
  // confirm("确定要退出登录吗？", '提示', {
  //   confirmButtonText: "确定",
  //   type: "warning",
  //   center: true
  // })
  //     .then(() => {
  //       message({
  //         type: "success",
  //         message: "退出登录成功"
  //       })
  //       router.push("/")
  //       sessionStorage.clear()
  //     })
  //     .catch(() => {
  //       message({
  //         type: "info",
  //         message: "已取消退出登录"
  //       })
  //     })
  ElMessageBox.confirm(
      '确定要退出登陆吗?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        ElMessage({
          type: 'success',
          message: '退出登录成功',
        })
        console.log('logout')
        router.push('/')
        sessionStorage.clear()
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消退出登录',
        })
      })
  // console.log('logout')
  // router.push('/')
  // sessionStorage.clear()
}
const collapse = function () {
  emit('doCollapse')
}
onMounted(async () => {
  await router.push("/home")
})

</script>

<template>
  <div class="toolbar" style="display: flex; line-height: 60px">
    <div>
      <!--      <el-icon size="20px" style="margin-top: 30px">-->
      <!--        <component class="fold-menu" :is="icon_name"></component>-->
      <!--      </el-icon>-->
      <ElIcon class="fold-menu" size="25" color="red" style="margin-top: 30px" @click="collapse">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
          <path fill="currentColor" :d="icon_code"></path>
        </svg>
      </ElIcon>
    </div>
    <div style="display:flex; flex: 1; justify-content: center; align-items: center; font-size: 34px;">
      <el-icon size="50px">
        <Shop></Shop>
      </el-icon>
      <span>欢迎来到超市进销存管理系统</span>
    </div>
    <el-dropdown>
      <el-icon class="fold-menu" size="20px" style="margin-right: 8px; margin-top: 1px;">
        <UserFilled></UserFilled>
      </el-icon>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click.native="toUser">个人中心</el-dropdown-item>
          <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <span style="font-size: 15px">{{ user.no }}</span>
  </div>
</template>

<style scoped>

.fold-menu {
  cursor: pointer;
}
</style>